<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>


    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc v-bind="baseOption" :data="form">
    </ex_super_desc>
    <ex_header_spiler :title="$tt('label_sku_info')" />
    <ex_super_table v-bind="returnItemOption" ref="superTable" :data="form.detailList" size="default"
      :default-expand-all="true" @expand-change="handleExpandChange">
      <template v-slot:expandHandle="{ row }">
        <span v-if="!row.attachedList || row.attachedList.length === 0">—</span>
        <span v-else class="expandText" @click="toogleExpand(row)">
          {{ row.isExpend || row.isExpend !== '' ? $t('label_retract') : $t('label_view') }}
        </span>
      </template>
      <template v-slot:expand="{ row }">
        <div class="image__preview" style="margin-left: 50px; padding: 10px 0;"
          v-if="row.attachedList && row.attachedList.length != 0">
          <ex_image_view
            v-for="(item, index) in row.attachedList.filter(it => !['mp4', 'avi', 'mov'].includes(it.filePath.split('.').pop()))"
            :key="index" style="width: 100px; height: 100px;margin-right: 10px;" :src="item.filePath" lazy fit="fill"
            :preview-src-list="row.attachedList.map(it => it.filePath)" />
          <div class="videoBox"
            v-for="(item, index) in row.attachedList.filter(it => ['mp4', 'avi', 'mov'].includes(it.filePath.split('.').pop()))"
            :key="'v' + index" @click="visiblemovie($ex_default_download_url + item.filePath)">
            <div class="play"></div>
            <video style="width: 100px; height: 100px;">
              <source :src="$ex_default_download_url + item.filePath" type="video/mp4" />
            </video>
          </div>
        </div>
        <div v-else></div>
      </template>
    </ex_super_table>

    <ex_header_spiler :title="$tt('label_operate_record')" />
    <ex_super_table v-bind="operateLogOption" :data="operateLog" size="default" :loading="operateLogLoading">
    </ex_super_table>

    <ex_header_spiler :title="$tt('label_receivable_accounts_details')" />
    <ex_super_table v-bind="billOption" :data="billData"
      size="default" height="300" />

    <el-dialog :visible.sync="dialogVisiblevideo" :title="$t('label_warehouse_unpack_video')" width="940px">
      <div>
        <video controls="controls" style="width: 900px;height: 450px;">
          <source :src="movie" type="video/mp4" />
        </video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import router_params from '@/mixin/router_params';

let defaultObj = {

}
export default {

  title: "label_return_order",
  mixins: [router_params],
  components: {},
  data() {
    return {
      movie: '',
      dialogVisiblevideo: false,
      loading: false,
      form: _.cloneDeep(defaultObj),
      baseOption: {
        attrs: this.$defaultDetailDescAttrs,
        model: [
          { key: 'customerName', label: 'label_customer', 'show-overflow-tooltip': true, span: 4, },

          { key: 'code', label: 'label_return_order_code', 'show-overflow-tooltip': true, },
          { key: 'platformName', label: 'label_srm_api_service_platform_name', formatter: (r, c, v) => this.$formatNameCode(v, r.platformCode) },
          { key: 'platformOrderNo', label: 'label_srm_api_order_order_code', 'show-overflow-tooltip': true, },
          { key: 'ecommerceOrderNo', label: 'label_ec_platform_code', 'show-overflow-tooltip': true, },

          { key: 'trackingNumber', label: 'label_track_code', 'show-overflow-tooltip': true, },
          { key: 'customerTrackingNumber', label: 'label_customer_track_code', 'show-overflow-tooltip': true, },
          {
            key: 'status', label: 'label_status', 'width': 120, 'show-overflow-tooltip': true,
            formatter: (r, c, v, i) => this.$enumShow(v, "ReturnOrderStatusEnum")
          },
          { key: 'warehouseName', label: 'label_returnGood_warehouse', 'width': 100, formatter: (r, c, v) => this.$formatNameCode(v, r.warehouseCode) },

          { key: 'itemsNumber', label: 'label_single_kind_count', 'width': 100, },
          { key: 'packageCode', label: 'label_collect_code', },
          { key: 'orderWeight', label: 'label_order_weight', },
          { key: 'measurementWeight', label: 'label_package_measure_weight' },
          { key: 'needUnpacking', label: 'label_is_unpack', formatter: (r, c, v, i) => this.$enumShow(v, 'YesOrNoEnum'), },

          // { key: 'warehouseRemark', label: 'label_warehouse_remark' },

          // { key: 'returnReason', label: 'label_returnGood_reason' },
          { key: 'customerComment', label: 'label_customer_comment', span: 4 },
          { key: 'returnReason', label: 'label_returnGood_reason', span: 4 },
          {
            key: 'attachedList', label: 'label_order_attachment', span: 4,
            render: (h, { data }) => {
              const imgList = data.attachedList ? data.attachedList.filter(it => {
                let extension = it.filePath.split('.').pop();
                return !['mp4', 'avi', 'mov'].includes(extension)
              }) : []
              const videoList = data.attachedList ? data.attachedList.filter(it => {
                let extension = it.filePath.split('.').pop();
                return ['mp4', 'avi', 'mov'].includes(extension)
              }) : []
              return <div>
                <ex_super_upload disabled={true} value={imgList} style="margin-bottom:10px" />
                <div class="videoList">
                  {
                    videoList.map((item, index) => {
                      return <div class="videoBox">
                        <div class="play"></div>
                        <video onClick={() => this.visiblemovie(this.$ex_default_download_url + item.filePath)} key={index}>

                          <source src={this.$ex_default_download_url + item.filePath} type="video/mp4" />
                        </video>
                      </div>
                    })
                  }
                </div>
              </div>
            }
          },
        ],
      },
      returnItemOption: {
        model: [
          { type: 'expand', slot: 'expand', fixed: 'right', 'width': 1, 'show-overflow-tooltip': true, },
          { key: "skuCode", label: "label_sku_code", 'show-overflow-tooltip': true, },

          { key: 'skuOnlyCode', label: 'label_sku_only_code', 'show-overflow-tooltip': true, },
          { key: 'returnSkuCodeList', label: 'label_return_order_sku_code', 'min-width': 130, 'show-overflow-tooltip': true, },

          {
            key: 'skuName', label: 'label_sku_name', attrs: {
              formatter: (r, c, v) => this.$formatNameCode(v, r.skuNameEn),
              'width': 140, 'show-overflow-tooltip': true,
            }
          },

          {
            key: 'skuNameEn', label: 'label_sku_name_en', attrs: {
              'width': 140, 'show-overflow-tooltip': true,
            }
          },

          {
            key: 'skuCurrencyCode', label: 'label_currency_kind', 'min-width': 130, 'show-overflow-tooltip': true,
          },
          {
            key: 'skuPrice', label: 'label_sale_value', 'min-width': 130, 'show-overflow-tooltip': true,
          },
          // { key: 'skuQuantity', label: 'label_count', 'width': 130, 'show-overflow-tooltip': true, },
          // { key: 'skuReturnQuantity', label: 'label_return_order_count', 'width': 130, 'show-overflow-tooltip': true, },
          // { key: 'skuDeclaredValue', label: 'label_declared_value', 'width': 130, 'show-overflow-tooltip': true, },
          { key: 'skuWeight', label: 'label_tms_track_weight', 'min-width': 130, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$addUnit(this.$formatDigit(v), 'kg'), },
          // {
          //   key: 'returnHandlingMethod', label: 'label_return_order_do_with', 'width': 130, 'show-overflow-tooltip': true,
          //   formatter: (r, c, v) => v ? this.$enumShow(v, "SkuReturnMethodEnum") : ''
          // },
          {
            key: 'skuCondition', label: 'label_return_order_sku_condition', 'width': 150, 
            formatter: (r, c, v, i) => this.$enumShow(v, "ReturnItemConditionEnum")
          },
          {
            key: 'status', label: 'label_status',  'width': 150, 
            formatter: (r, c, v, i) => this.$enumShow(v, "ReturnOrderStatusEnum")
          },
          {
            key: 'skuSize', label: 'label_length_width_height', 'min-width': 230,
            formatter: (r, c, v) => this.$addUnit([this.$formatDigit(r.skuLength, 2), this.$formatDigit(r.skuWidth, 2), this.$formatDigit(r.skuHeight, 2)].join(' * '), 'cm')
          },
          {
            key: 'locationCodeList', label: 'label_putaway_warehouse_location', 'min-width': 130, 'show-overflow-tooltip': true,
            formatter: (r, c, v) => v?v.join(','):''
          },
          {
            key: 'skuLink', label: 'label_sku_link', 'min-width': 130, 'show-overflow-tooltip': true,
            render: (h, { row }) => {
              if (row) {
                return <a href={row.skuLink} target="_blank">{row.skuLink}</a>
              }
            }
          },
          {
            key: 'returnHandlingMethod', label: 'label_do_with_method', 'min-width': 130, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "SkuReturnMethodEnum")
          },
          { slot: 'expandHandle', label: 'label_sku_photo', 'show-overflow-tooltip': true, },
        ]
      },
      operateLogLoading: false,
      operateLog: [],
      operateLogOption: {
        model: [{
          key: 'operateTime', label: 'label_operate_time', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v) => this.$dateFormat(v)
        },
        {
          key: "operateType", label: "label_operate_type", 'width': 130,
          formatter: (r, c, v, i) => this.$enumShow(v, "ReturnOperateTypeEnum")
        },
        {
          key: "status", label: "label_order_status", 'width': 130,
          formatter: (r, c, v, i) => this.$enumShow(v, "ReturnOrderStatusEnum")
        },
        {
          key: 'destContainerCode', label: 'label_bind_container_code', 'min-width': 150,
          render: (h, { row }) => {
            const pretext = row.srcContainerCode ? `${row.srcContainerCode} → ` : ""
            return (<div>
              {pretext} <span class="bold color_success">{row.destContainerCode}</span>
            </div>)
          }
        },
        {
          key: 'remark', label: 'label_remark', 'min-width': 120,
        },
        {
          key: 'userName', label: 'label_operate_user', 'width': 130, 'show-overflow-tooltip': true,
        }]
      },
      billData:[],
      billOption: {
        attrs: { stripe: true, },
        defaultColAttr: {
          align: 'left',
        },
        model: [
          {
            key: 'productName', label: 'label_logistics', 'min-width': 200,
            render: (h, { row, column }) => this.$renderText(h, this.$formatNameCode(row[column.property], row.productCode)),
          },
          { key: 'serviceName', label: 'label_pms_service_cost', 'min-width': 160, render: (h, { row, column }) => this.$renderText(h, row[column.property]), },

          { key: 'price', label: 'label_calculate_unit_price', 'width': 140, render: (h, { row, column }) => this.$renderText(h, this.$addUnit(row[column.property], row.currencyType)), },
          { key: 'calNums', label: 'label_calculate_count', 'width': 120, render: (h, { row, column }) => this.$renderText(h, row[column.property]), },
          { key: 'serviceAmount', label: 'label_money', 'width': 140, render: (h, { row, column }) => this.$renderText(h, this.$addUnit(row[column.property], row.currencyType)), },
          { key: 'status', label: 'label_settlement_situation', 'width': 150, render: (h, { row, column }) => this.$renderText(h, this.$enumShow(row[column.property], 'FmsBillDetailStatus')), },

        ]
      },
    };
  },



  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: this.$url['oms/ReturnOrderDetail'],
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.form = Object.assign({}, _.cloneDeep(defaultObj), res.data)

            this.form.detailList.map(item => {
              if (item.returnSkuCodeList) {
                item.returnSkuCodeList = item.returnSkuCodeList.join(',')
              }
              return item
            })
            this.fixTabLabel()
          },
          complete: () => {
            this.loading = false

          }

        })

        this.operateLogLoading = false
        this.$ajax({
          url: this.$url['oms/ReturnOrderOperateLogs'],
          method: 'post',
          data: { returnOrderId: into_params.id },
          success: (res) => {
            this.operateLog = res.data && res.data.rows || []
          },
          complete: () => {
            this.operateLogLoading = false
          }
        })

        this.$ajax({
          url:'/fms-api/customer/CustomerBillDetailRpc/select.json',
          method: 'post',
          data: { productType: 'RETURN',refOrderNo:into_params.code,pageIndex:1,pageSize:9999},
          success: (res) => {
            this.billData = res.data && res.data.rows || []
          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      if (!!this.form.code) {
        this.$emit("tagModifyLabel", { _key: 'label_name_code', name: this.$t('label_return_order'), code: this.form.code || '' })

      } else {
        this.$emit("tagModifyLabel", "label_return_order")
      }
    },
    visiblemovie(val) {
      this.movie = val;
      this.dialogVisiblevideo = !this.dialogVisiblevideo;
    },
    handleExpandChange(row, rows) {
      // 判断当前行展开状态
      const isExpend = rows.some(r => r.id === row.id)
      if (isExpend) {
        row.isExpend = true
      } else {
        row.isExpend = false
      }
    },
    toogleExpand(row) {
      this.$refs.superTable.toggleRowExpansion(row)
    },
  }
};

</script>
<style lang="less" scoped>
/deep/ .videoList {
  display: flex;
  gap: 0 10px;

  .videoBox {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #fbfdff;
    border: 2px dashed #c0ccda;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    .play {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('~@/asset/play.png') no-repeat center center rgba(0, 0, 0, 0.3);
    background-size: 40px 40px;
  }
    video {
      width: 100%;
      height: 100%;
    }
  }
}

/deep/ .el-table__expanded-cell {
  padding: 0;
}

.videoBox {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  position: relative;
  display: inline-block;

  .play {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('~@/asset/play.png') no-repeat center center rgba(0, 0, 0, 0.3);
    background-size: 40px 40px;
  }

  video {
    width: 100%;
    height: 100%;
  }
}
</style>
